<script setup lang="ts">
import { ref } from "vue";
import router from "@/router";
import { useSystemStoreWithOut } from "@/store/modules/system";
import { storeToRefs } from "pinia";

const systemStore = useSystemStoreWithOut();
const { warehouseList } = storeToRefs(systemStore);

const props = defineProps({
  outboundTypeList: {
    type: Array,
    default: () => []
  }
});

const emits = defineEmits(["handleSearch"]);
let searchForm = ref({
  outboundType: "", // 出库类型
  warehouseCode: "", // 出库仓库名称
  beginDate: "", // 出库开始日期
  endDate: "", // 出库结束日期
  outboundCode: "", // 出库单号
  relateOrderCode: "" // 出库关联单号
});
const dateArea = ref([]);

// 日期更改

const dateChange = (value: []) => {
  if (!value) {
    searchForm.value.beginDate = "";
    searchForm.value.endDate = "";
  } else {
    searchForm.value.beginDate = dateArea.value[0];
    searchForm.value.endDate = dateArea.value[1];
  }
};

let handleReset = () => {
  searchForm.value = {
    outboundType: "",
    warehouseCode: "",
    beginDate: "",
    endDate: "",
    outboundCode: "",
    relateOrderCode: ""
  };
  emits("handleSearch");
};

let addNewCostomer = () => {
  router.push({
    name: "outboundAddDetail"
  });
};

defineExpose({
  getForm: () => searchForm.value
});
</script>

<template>
  <header class="header flex-row w-full wrapper-form">
    <div class="header_left flex-1">
      <el-form class="form" :model="searchForm" inline>
        <div class="inline-flex">
          <el-form-item label="出库类型" prop="outboundType">
            <el-select v-model="searchForm.outboundType" placeholder="请选择" clearable>
              <el-option
                v-for="item in props.outboundTypeList"
                :key="item.dictLabelValue"
                :value="item.dictLabelValue"
                :label="item.dictLabelName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="出库仓库名称" prop="warehouseCode">
            <el-select
              v-model="searchForm.warehouseCode"
              placeholder="请输入"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in warehouseList"
                :key="index"
                :value="item.warehouseCode"
                :label="item.warehouseName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="出库日期" prop="beginDate">
            <el-date-picker
              v-model="dateArea"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              @change="dateChange"
            />
          </el-form-item>
        </div>
        <div class="inline-flex">
          <el-form-item label="出库单号" prop="outboundCode">
            <el-input v-model="searchForm.outboundCode" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="出库关联单号" prop="relateOrderCode">
            <el-input
              v-model="searchForm.relateOrderCode"
              placeholder="请输入"
            />
          </el-form-item>
          <el-button type="primary" @click="emits('handleSearch')"
            >查询</el-button
          >
          <el-button @click="handleReset">重置</el-button>
        </div>
      </el-form>
    </div>
    <div class="header_right">
      <el-button @click.prevent.stop="addNewCostomer"
        ><span>+ </span>&nbsp;新增</el-button
      >
    </div>
  </header>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;

  .header_left {
    display: flex;
    align-items: center;
    height: 100%;

    .form {
      width: 100%;
    }
  }

  .header_right {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;

    :deep(.el-button + .el-button) {
      margin-left: 0;
    }
  }
}
</style>
